import {Button, Form, Input, message} from 'antd';
import {useForm} from 'antd/es/form/Form';
import './password.less';
import {useCallback, useEffect} from 'react';
import {useNavigate, useParams} from 'react-router-dom';
import {getUserInfoByIdNo, getUserPasswordCapcha, postUserUpdatePassword} from '../../../../../../api/admin/user.js'

const layout1 = {
    labelCol: {span: 6},
    wrapperCol: {span: 18}
}

const Password = () => {
    // const [type,setType] = useState('0')
    const params = useParams()
    console.log("params:", params)
    // setType('1')

    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = useCallback(async (values) => {

        if (values.password !== values.confirmPassword) {
            return message.error('两次密码不一致');
        }
        const res = await postUserUpdatePassword(values);

        if (res.code === 201 || res.code === 200) {
            message.success('密码修改成功,需重新登录账号');
            localStorage.removeItem('access_token')
            localStorage.removeItem('user_info')
            setTimeout(() => {
                navigate('/')
                location.reload()
            }, 1000);
        } else {
            message.error(res.data || '系统繁忙，请稍后再试');
        }

    }, []);

    const sendCaptcha = useCallback(async () => {
        const address = form.getFieldValue('email');
        if (!address) {
            return message.error('请输入邮箱地址');
        }

        const res = await getUserPasswordCapcha({address});
        console.log(res, 'res')
        if (res.code === 201 || res.code === 200) {
            message.success(res.data);
        } else {
            message.error('系统繁忙，请稍后再试');
        }
    }, []);

    useEffect(() => {
        getUserInfoByIdNoList()
    }, [])

    const getUserInfoByIdNoList = () => {
        getUserInfoByIdNo()
            .then(res => {
                const {code, data} = res
                if (code === 200) {
                    form.setFieldsValue({
                        username: data.username,
                        email: data.email
                    })
                }
                console.log(res, 'res')
            })
    }

    return <div id="updatePassword-container">
        <h1 id="register-title">重置密码</h1>
        <Form
            form={form}
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    {required: true, message: '请输入用户名!'},
                ]}
            >
                <Input disabled/>
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    {required: true, message: '请输入邮箱!'},
                    {type: "email", message: '请输入合法邮箱地址!'}
                ]}
            >
                <Input disabled/>
            </Form.Item>

            <div className='captcha-wrapper'>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{required: true, message: '请输入验证码!'}]}
                >
                    <Input maxLength={6}/>
                </Form.Item>
                <Button type="primary" className="captcha-btn" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
                label="密码"
                name="password"
                rules={[{required: true, message: '请输入密码!'}]}
            >
                <Input.Password maxLength={6}/>
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="confirmPassword"
                rules={[{required: true, message: '请输入确认密码!'}]}
            >
                <Input.Password maxLength={6}/>
            </Form.Item>

            <Form.Item
                {...layout1}
                label=" "
            >
                <Button className='btn' type="primary" htmlType="submit">
                    修改
                </Button>
            </Form.Item>
        </Form>
    </div>
}

export default Password